/*
 * @Date: 2023-08-03 09:43:40
 * @LastEditors: zhangsongwei
 * @LastEditTime: 2023-08-06 02:56:49
 * @FilePath: /z/src/pages/dashbord/first.tsx
 * @description:
 */

import React, { useEffect, useState } from "react";
import { Tabs, Select, Row, Col, List, Table } from "antd";
import { getBasic, getMapInfo } from "../../urls/p";

import { Map, Markers } from "react-amap";

const { TabPane } = Tabs;

const { Option } = Select;

export default () => {
  const [dataList, setDataList] = useState([]);
  const [mapList, setMapList] = useState<any[]>([]);
  const [showData, setShowData] = useState<any[]>([]);
  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    getData();
    getMap();
  }, []);
  const getData = async () => {
    const res = await getBasic();
    setDataList(res.info || []);
    setShowData(res.info.slice(0, 10) || []);
  };
  const getMap = async () => {
    const res = await getMapInfo();
    setMapList(res.info || []);
  };
  const randomMarker = () => {
    return mapList.map((e: any, idx) => {
      return {
        position: {
          longitude: e.longitude,
          latitude: e.latitude,
        },
        ...e,
      };
    });
  };
  const columns = [
    {
      title: "className",
      dataIndex: "className",
      key: "className",
    },
    {
      title: "cityName",
      dataIndex: "cityName",
      key: "cityName",
      render: (t: any, r: any) => {
        return (
          <div>
            <span>{`${r.cityName}(${r.num})`}</span>
          </div>
        );
      },
    },

    {
      title: "eventType",
      dataIndex: "eventType",
      key: "eventType",
    },
    {
      title: "subClassName",
      dataIndex: "subClassName",
      key: "subClassName",
    },
    {
      title: "classOccurDate",
      dataIndex: "classOccurDate",
      key: "classOccurDate",
    },
  ];

  const renderMarkerLayout = (e: any) => {
    // TODO DEL
    console.log("zz=del=info======>e ", e);
    return (
      <div
        style={{
          padding: "3px",
          whiteSpace: "nowrap",
          backgroundColor: "#fff",
          color: "#000",
          border: "1px solid #000",
        }}
        key={e.myLabel}
      >
        {`${e.cityName}(${e.nums})`}
      </div>
    );
  };
  const map = () => {
    if (!mapList || !mapList.length) return <></>;
    return (
      <div style={{ height: "600px", overflow: "hidden" }}>
        <Map
          amapkey={"40c04f5b3b2e6596fdd59e6036df164d"}
          zoom={6}
          plugins={["ToolBar"]}
          center={{ longitude: 115, latitude: 40 }}
        >
          <Markers
            markers={randomMarker()}
            useCluster={false}
            render={renderMarkerLayout}
          />
        </Map>
      </div>
    );
  };
  const onChange = (pagination: any) => {
    const { current } = pagination;
    setCurrentPage(current);
    const dataList1 = JSON.parse(JSON.stringify(dataList));
    setShowData(dataList1.slice((current - 1) * 10, current * 10));
  };

  return (
    <div>
      <Row gutter={[10, 10]}>
        <Col span={12}>
          <Table
            columns={columns}
            dataSource={showData}
            pagination={{ total: dataList.length, pageSize: 10 }}
            onChange={onChange}
          />
        </Col>
        <Col span={12}>{map()}</Col>
      </Row>
    </div>
  );
};
